<template>
    <div>
        <el-form  :model="item" :rules="rules" ref="itemAdd">
           <el-form-item label="商品名称" style="width:500px" prop="itemName">
             <el-input v-model="item.itemName"  />
           </el-form-item>
           <el-form-item label="商品价格" prop="price">
             <el-input-number v-model="item.price" :min="0"/>
           </el-form-item>
           <el-form-item label="所属分类" prop="cateId">
             <el-cascader v-model="item.cateId" :options="cates" :props="{
             checkStrictly: true,
             label: 'cateName',
             emitPath: false,
             value: 'id'
             }" clearable />
           </el-form-item>
           <el-form-item label="上下架" prop="onsale">
              <el-switch v-model="item.onsale" inline-prompt active-text="上架" inactive-text="下架" />
            </el-form-item>
            <el-form-item label="上传图片" >
                <!-- 图片上传部分 -->
                <el-upload
                name="file"
                action="/api/upload"
                list-type="picture-card"
                :auto-upload="false"
                :before-upload="beforeUpload"
                :on-success="onSuccess"
                limit=9>
                  <el-icon><Plus /></el-icon>

                  <template #file="{ file }">
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  </template>
                </el-upload>
            </el-form-item>
            <el-form-item label="商品描述" prop="desc">
              <el-input v-model="item.desc" type="textarea" />
            </el-form-item>
            <el-form-item>
              <div class="fwb">
                <Toolbar
                   style="border-bottom: 1px solid #ccc"
                   :editor="editor"
                   :defaultConfig="toolbarConfig"
                   :mode="mode"
                />
                <Editor
                   style="height: 500px; overflow-y: hidden;"
                   v-model="item.content"
                   :defaultConfig="editorConfig"
                   :mode="mode"
                   @onCreated="onCreated"
                />
              </div>
            </el-form-item>
            <el-el-form-item>
              <el-button type="primary" @click="onSubmit">新增</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-el-form-item>
        </el-form>
    </div>
</template>

<script>
import { fetchCates } from '@/api/cateList'
import { updateItem, getItemDetail } from '@/api/itemUpdate'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'

export default {
  name: 'ItemAdd',
  data () {
    return {
      editor: null, // 富文本编辑
      toolbarConfig: { },
      editorConfig: {
        placeholder: '请输入内容...',
        // 菜单配置/上传图片
        MENU_CONF: {
          uploadImage: {
            server: '/api/upload',
            fieldName: 'file',
            customInsert: (res, insertFn) => {
              if (res.code === 200) {
                insertFn(res.data.url)
              }
            }
          }
        }
      },
      mode: 'default', // or 'simple'
      rules: {
        itemName: [
          {
            required: true,
            message: '商品名必填'
          }
        ],
        price: [
          {
            required: true,
            message: '商品价格必填'
          }
        ],
        onsale: [
          {
            required: true,
            message: '上下架必选'
          }
        ],
        cateId: [
          {
            required: true,
            message: '所属分类必填'
          }
        ]
      },
      item: { // 表单数据
        itemName: '',
        price: 0,
        onsale: true,
        desc: '',
        thumb: '',
        cateId: 1,
        content: '' // 富文本数据
      },
      cates: []
    }
  },
  methods: {
    fetchItem () {
      getItemDetail(this.$route.query.id).then(res => {
        if (res.data.code === 200) {
          this.item = res.data.data
        }
      })
    },
    onCreated (editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    fetchCates () {
      fetchCates().then(res => {
        if (res.data.code === 200) {
          this.cates = res.data.data
        }
      })
    },
    onSuccess (res) {
      // 封面图片上传成功
      if (res.code === 200) {
        this.item.thumb = res.data.url
      }
    },
    onSubmit () {
      this.$refs.itemAdd.validate().then(() => {
        updateItem(this.item).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              duration: 2000,
              message: res.data.msg,
              onClose: () => {
                // 回到商品列表中
                this.$router.replace('/itemLists')
              }
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '表单校验不通过'
        })
      })
    },
    resetForm () {
      this.$refs.itemAdd.resetFields()
    }
  },
  created () {
    this.fetchCates()
    this.fetchItem()
  },
  components: { Editor, Toolbar }
}
</script>

<style lang="scss" scoped>
.fwb{
    border: 1px solid #ccc;
}
</style>
